<template>
  <div class="home">
    <div id="isTop" style="width: 5px;height: 5px;"></div>
    <div id="to-top-btn">
      <div @click="goTo()" class="dvStyleS">
        <i
          class="iconfont icon-0-46"
          style="color: #192220;font-size: 50px; position:fixed; right:20px; bottom:20px;"
          ><div class="hddb">回到顶部</div></i
        >
      </div>
    </div>
    <div class="container">
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="item in Swiperlist">
          <img :src="item.pics_mid" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <section id="goods_show" class="container">
      <div class="goods_wrap row">
        <div class="col-4 advertise">
          <router-link :to="{ path: '/goodslist', query: { cid: 4 } }">
            <img src="../../../public/images/caomei.jpg" />
          </router-link>
        </div>
        <div class="col-4 advertise">
          <router-link :to="{ path: '/goodslist', query: { cid: 62 } }">
            <img src="../../../public/images/pinguo.jpg" />
          </router-link>
        </div>
        <div class="col-4 advertise">
          <router-link :to="{ path: '/goodslist', query: { cid: 3 } }">
            <img src="../../../public/images/putao.jpg" />
          </router-link>
        </div>
        <!-- <div class="col-3 advertise">
					<img src="../../public/images/SZ.jpg">
				</div> -->
      </div>
      <div class="hot_goods">
        <div class="hot_nav">
          <h5>热门商品</h5>
        </div>
        <div class="row">
          <section class="col-3" v-for="b in blist.slice(0, 4)">
            <router-link
              :to="{ path: '/goodsdetails', query: { goods_id: b.goods_id } }"
            >
              <img
                :src="
                  b.goods_small_logo
                    ? b.goods_small_logo
                    : 'https://th.bing.com/th/id/Rba514750b17ba93e3246dddc1701fb32?rik=PI%2b5poMwtaPpVg&riu=http%3a%2f%2fwww.sucaijishi.com%2fuploadfile%2f2020%2f0110%2f20200110051242482.png&ehk=0%2flB0BGtq0UTwL3A%2bfvgrCZx5fElQZlFAS2%2b4qaQkTk%3d&risl=&pid=ImgRaw'
                "
              />
              <div class="goods_title">
                <h3>{{ b.goods_name.slice(0, 15) }}...</h3>
                <h5>{{ b.info }}</h5>
              </div>
              <div class="price">
                <span>￥{{ b.goods_price }}</span>
              </div>
            </router-link>
          </section>
        </div>
      </div>
      <div class="hot_goods">
        <div class="hot_nav">
          <h5>火爆商品</h5>
        </div>
        <div class="row">
          <div class="col-6">
            <img
              src="../../../public/images/tupian22.jpg"
              style="width: 100%;height: 358px;"
            />
          </div>
          <section class="col-3" v-for="b in alist.slice(0, 6)">
            <router-link
              :to="{ path: '/goodsdetails', query: { goods_id: b.goods_id } }"
            >
              <img
                :src="
                  b.goods_small_logo
                    ? b.goods_small_logo
                    : 'https://th.bing.com/th/id/Rba514750b17ba93e3246dddc1701fb32?rik=PI%2b5poMwtaPpVg&riu=http%3a%2f%2fwww.sucaijishi.com%2fuploadfile%2f2020%2f0110%2f20200110051242482.png&ehk=0%2flB0BGtq0UTwL3A%2bfvgrCZx5fElQZlFAS2%2b4qaQkTk%3d&risl=&pid=ImgRaw'
                "
              />
              <div class="goods_title">
                <h3>{{ b.goods_name.slice(0, 15) }}...</h3>
                <h5>{{ b.info }}</h5>
              </div>
              <div class="price">
                <span>￥{{ b.goods_price }}</span>
              </div>
            </router-link>
          </section>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Swiperlist: [],
      blist: [],
      alist: [],
      Base_Url: "http://localhost:8080/mall/goods",
    };
  },
  created: function() {
    this.$axios.get(`${this.Base_Url}/detail`).then(
      function(ret) {
        this.Swiperlist = ret.data.message.pics;
        // console.log(ret.data.message.pics)
      }.bind(this)
    );

    this.$axios.get(`${this.Base_Url}/search?pagenum=1&pagesize=20&cid=3`).then(
      function(ret) {
        // console.log(ret)
        this.blist = ret.data.message.goods;
        // console.log(this.blist)
      }.bind(this)
    );
    this.$axios.get(`${this.Base_Url}/search?pagenum=1&pagesize=20&cid=4`).then(
      function(ret) {
        // console.log(ret)
        this.alist = ret.data.message.goods;
        // console.log(this.blist)
      }.bind(this)
    );
  },
  methods: {
    goTo() {
      isTop.scrollIntoView({
        behavior: "smooth",
      });
    },
    // 返回顶部等等
    scrollToTop() {
      let topBtn = document.getElementById("to-top-btn");
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let browserHeight = 200;
      if (scrollTop > browserHeight) {
        topBtn.style.display = "block";
      } else {
        topBtn.style.display = "none";
      }
    },
  },
};
</script>
<style lang="less">
.el-carousel {
  margin-top: 150px;

  .el-carousel__item {
    height: 400px;
  }
}

#goods_show {
  margin-top: 20px;

  .row {
    margin-left: 0px;
    margin-right: 0px;
  }
  .goods_wrap {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    .col-3 {
      // margin-left: 15px;
      // margin-right:15px;
      padding-left: 0px;
      padding-right: 0px;
    }
    .advertise {
      margin: 0;
      overflow: hidden;
      position: relative;
      border-right: 1px solid #efefef;
      img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }
    // &:hover {
    // 	box-shadow: inset 0px 0px 5px 1px #6f6f6f;
    // }
  }

  .hot_goods {
    margin-top: 160px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 8px;
    background: #fff;
    -webkit-box-shadow: 0 3px 8px -6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 8px -6px rgba(0, 0, 0, 0.1);

    .hot_nav {
      border-radius: 8px;
      background: #fafafa;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);

      h5 {
        margin-left: 25px;
        font-weight: bolder;
        font-size: 18px;
        line-height: 60px;
        color: #666;
      }
    }

    .row {
      margin-left: 0px;
      margin-right: 0px;
    }

    section {
      border: none;
      border-right: 1px solid #efefef;
      border-bottom: 1px solid #efefef;
      border-radius: initial;
      background: #fff;
      -webkit-transition: -webkit-box-shadow 0.15s ease-out;
      transition: -webkit-box-shadow 0.15s ease-out;
      transition: box-shadow 0.15s ease-out;
      transition: box-shadow 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;
      text-align: center;
      cursor: pointer;

      img {
        width: 204px;
        height: 204px;
        margin: 0 auto;
        padding: 20px 0 0;
      }

      .goods_title {
        margin-top: 20px;
        height: auto;

        h3 {
          font-size: 14px;
          font-weight: 700;
          margin: 0px 12px;
          padding-top: 8px;
          color: #333;
        }

        h5 {
          padding: 15px 10px 0;
          font-size: 12px;
          color: #999;
        }
      }

      .price {
        margin-top: 40px;
        margin-bottom: 10px;

        span {
          font-family: Arial;
          font-size: 18px;
          font-weight: bolder;
          color: #d44d44;
          padding-bottom: 2px;
          -webkit-transition: all 0.1s ease-out;
          transition: all 0.1s ease-out;
        }
      }

      &:hover {
        transform: translateY(-3px);
        box-shadow: 1px 1px 20px #999;
      }
    }
  }
}
</style>
